<template>
	<view class="my">
		<public-module></public-module>
		<image class="bj" src="/static/my/mybj.png"></image>
		<view class="top" :style="{marginTop:statusBarHeight+'px'}">
			<view class="top-nav">个人中心</view>
		</view>
		<view class="user">
			<u-avatar :src="img" size="64"></u-avatar>
			<view class="user-info">
				<view  class="user-info-name">{{name}}</view>
				<view class="user-info-identity" >
					<block  v-for="(item, index) in staffs" :key="index">
						<image v-if="item ==1" src="/static/staff/identity.png"></image>
						<image v-if="item ==2" src="/static/staff/ygy.png"></image>
						<image v-if="item ==3" src="/static/staff/jgy.png"></image>
					</block>
				</view>
			</view>
		</view>
		<view class="numerical">
			<image class="numerical-bj" src="/static/my/numerical-bj.png"></image>
			<view class="numerical-val">
				<view class="numerical-val-alone">
					<view class="numerical-val-alone-top" >
						<view class="numerical-val-alone-top-val">{{memberCount}}</view>
						<view class="numerical-val-alone-top-unit">位</view>
					</view>
					<view class="numerical-val-alone-lower">客户资源</view>
				</view>
				<view class="numerical-val-alone">
					<view class="numerical-val-alone-top">
						<view class="numerical-val-alone-top-val">{{monthPrice}}</view>
						<view class="numerical-val-alone-top-unit">元</view>
					</view>
					<view class="numerical-val-alone-lower">本月业绩</view>
				</view>
				<view class="numerical-val-alone">
					<view class="numerical-val-alone-top">
						<view class="numerical-val-alone-top-val">{{totalPrice}}</view>
						<view class="numerical-val-alone-top-unit">元</view>
					</view>
					<view class="numerical-val-alone-lower">总业绩</view>
				</view>
			</view>
		</view>
		<view class="u-page">
			<u-cell-group :border="false">
				<!-- <u-cell
					icon="/static/my/da.png"
				    title="个人客资"
				    isLink
					:border="false"
				></u-cell> -->
			<!-- 	<u-cell
					icon="/static/my/yj.png"
				    title="个人业绩"
					isLink
					:border="false"
				></u-cell> -->
				<!-- <u-cell
					icon="/static/my/qb.png"
				    title="个人钱包"
					isLink
					:border="false"
				></u-cell>
				<u-cell
				   icon="/static/my/yd.png"
				   title="学习园丁"
				   isLink
				   :border="false"
				></u-cell> -->
				<u-cell
				    icon="/static/my/ewm.png"
				    title="二维码"
					isLink
					:border="false"
					@click="cellClick('ewmshow')"
				></u-cell>
				<u-cell
				    icon="/static/tabbar/my-2.png"
				    title="用户端"
					isLink
					:border="false"
					@click="cellClick('jumpUser')"
				></u-cell>
				
			</u-cell-group>
			
		</view>
		
		<u-overlay :show="show" @click="show = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<image style="width: 500rpx;height: 500rpx;" :src="qrCode"></image>
					</view>
				</view>
		</u-overlay>
		
		<tabBar selectedIndex=2 plugins=2></tabBar>
		
	</view>
</template>

<script>
	import base from '@/config/baseUrl';
	import tabBar from "@/components/tabbar/tabbar.vue";
	import { staffInfo } from '@/config/api.js';
	export default {
		data() {
			return {
				statusBarHeight:30,
				show: false,
				img:"",//头像
				name:'',//名字,
				memberCount:0,  //总用户数量
				monthPrice:0.00,  //月业绩
				totalPrice:0.00, //总业绩
				qrCode:'', //二维码
				staffs:[],//员工
				baseUrl:base.baseUrl,
				ossUrl:base.ossUrl
			};
		},
		components:{
			tabBar
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			const _this = this;
			if (systemInfo.platform === 'ios') {  
				_this.statusBarHeight = 30; // iOS 上状态栏的典型高度  
			} else if (systemInfo.platform === 'android') {  
				// 对于 Android，可能需要其他方法来获取状态栏高度   
				_this.statusBarHeight =  (systemInfo.statusBarHeight || 24)+10; // 假设 Android 上状态栏的高度为 24px  
			} else{
				_this.statusBarHeight = (systemInfo.statusBarHeight || 24)+10; // 假设 Android 上状态栏的高度为 24px  
			}
			this.infoAll()
		},
		methods:{
			cellClick(str)
			{
				switch (str) {
					case "ewmshow":
						this.show =true; //开启二维码
						break;
					case "jumpUser":
						uni.switchTab({
						   url:'/pages/index/index'
						}); //跳转到用户端
						break;
				}
				
			},
			infoAll()
			{
				var _this = this
				staffInfo({}).then((res) => {
					// _this.store_name = res.store_name
					// _this.indexList = _this.indexList.concat(res.data.data);
					// _this.isLoding = 0;
					_this.img  = _this.ossUrl + res.data.user.headimgurl;//头像
					_this.name = res.data.user.name ? res.data.user.name:res.data.user.nickname;//名字,
					_this.memberCount= res.data.memberCount;  //总用户数量
					_this.monthPrice = res.data.monthPrice;  //月业绩
					_this.totalPrice = res.data.totalPrice; //总业绩
					_this.qrCode = _this.ossUrl + res.data.qrCode; //二维码
					_this.staffs = res.data.staff.industry;//员工
					
				}).catch((err) =>{
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		
		background-color: #ffffff;
	}
	.my{
		.bj{
			width: 750rpx;
			height: 370rpx;
			position: absolute;
			z-index: -10;
		}
		.top{
			&-nav{
				text-align: center;
				color: #fff;
		
			}
			
		}
		.user{
			box-sizing: border-box;
			margin: 60rpx 32rpx 0rpx 32rpx;
			display: flex;
			&-info{
				margin: 8rpx 0 0 40rpx;
				&-name{
					color: #fff;
					font-size: 36rpx;
				}
				&-identity{
					margin-top: 20rpx;
					display: flex;
					&>image{
						width: 136rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.numerical{
			margin-top:35rpx;
			&-bj{
				// margin: 0 20rpx;
				width: 750rpx;
				height: 362rpx;
				position: absolute;
				z-index: -1;
			}
			&-val{
				display: flex;
				justify-content: center;
				text-align: center;
				box-sizing: border-box;
				padding-top: 60rpx;
				&-alone{
					width: 229rpx;
					&-top{
						justify-content: center;
						display: flex;
						&-val{
							color: #3D3D3D;
							font-size: 40rpx;
						}
						&-unit{
							margin-top: 15rpx;
							color: #3D3D3D;
							font-size: 24rpx;
						}
					}
					&-lower{
						color: #777777;
						font-size: 24rpx;
						
					}
				}
			}
			
		}
		.u-page{
			margin-top: 200rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
		}
		
		.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		
		.rect {
			width: 500rpx;
			height: 500rpx;
			background-color: #fff;
		}
	}
</style>
